<template>
  <PageContainer>
    <Header title="缴费详情" />
    <view class="container">
      <view class="options disFlxJS">
        <text class="label">会员名称：</text>
        <text class="value">{{ info?.memberName }}</text>
      </view>
      <view class="options disFlxJS">
        <text class="label">当前职务：</text>
        <text class="value">{{ info?.levelName }}</text>
      </view>
      <view class="options disFlxJS">
        <text class="label">加入时间：</text>
        <text class="value">{{ info?.joinTime }}</text>
      </view>
      <view class="options disFlxJS">
        <text class="label">到期时间：</text>
        <text class="value">{{ info?.memberEndTime }}</text>
      </view>
      <view class="options disFlxJS">
        <text class="label">续期职务：</text>
        <text class="value">{{ reqData?.nowLevelName || info?.levelName }}</text>
      </view>
      <view class="options disFlxJS">
        <text class="label">缴费标准：</text>
        <text class="value">
          {{ reqData?.payMoney || info?.membershipFees || 0 }}元/{{
            reqData?.allottedTime || info?.allottedTime
          }}月
        </text>
      </view>
      <view class="options disFlxJS">
        <text class="label">待缴金额：</text>
        <text class="value">
          {{ formatMoney({ money: reqData?.payMoney || info?.membershipFees || 0 }) }}
        </text>
      </view>
      <view class="options disFlxJS">
        <text class="label">续费函：</text>
        <text class="value" style="color: #2878ff" @click="handleDownLoadReport">查看缴费函</text>
      </view>
      <view class="options disFlxJS">
        <text class="label">本期缴费至：</text>
        <text class="value">{{ endTime }}</text>
      </view>
      <view class="options disFlxJS">
        <text class="label">最近修改：</text>
        <text class="value">{{ reqData?.sysUserName }} {{ reqData?.updateTime }}</text>
      </view>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* paymentInfoDetails 缴费详情 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import type { IPaymenrecordByIdResult, SysMemberPageListResult } from '@/api/admin/types';
  import Header from '@/components/Header/index.vue';
  import { onLoad } from '@/router';
  import { ref, unref } from 'vue';
  import { formatMoney } from '@/utils/number';
  import { RenewDataInfo, Api } from '@/api/admin';
  import { useEnv } from '@/hooks/core/useEnv';
  import { useUpload } from '@/hooks/core/useUpload';
  import { formatToDate } from '@/utils/dateUtil';
  import dayjs from 'dayjs';

  const info = ref<SysMemberPageListResult>();
  const reqData = ref<IPaymenrecordByIdResult>();
  const startTime = ref<string>();
  const endTime = ref<string>();
  const allottedTime = ref<number>();

  onLoad<'paymentInfoDetails'>(async (op) => {
    info.value = op.item;

    const res = await RenewDataInfo(op.item.id);
    reqData.value = res;
    allottedTime.value = reqData.value?.allottedTime || info.value?.allottedTime;
    startTime.value = formatToDate(unref(info)?.memberEndTime); //缴费开始时间取到期时间
    endTime.value = dayjs(startTime.value)
      .add(allottedTime.value as number, 'month')
      .format('YYYY-MM-DD');
  });

  // 下载续费函
  const { getEnv } = useEnv();
  const { openDocument } = useUpload();
  function handleDownLoadReport() {
    //存在缴费记录时，优先取缴费记录数据
    const levelName = reqData.value?.levelName || info.value?.levelName;
    const nowLevelName = reqData.value?.nowLevelName || info.value?.levelName;
    const payMoney = reqData.value?.payMoney || info.value?.membershipFees;

    openDocument({
      filePath:
        getEnv('BASE_URL') +
        Api.renewExport +
        `?memberName=${
          info.value?.memberName
        }&levelName=${levelName}&nowLevelName=${nowLevelName}&amountPaid=${payMoney}&membershipFees=${payMoney}
      &applyType=${info.value?.applyType}&startTime=${startTime.value}&endTime=${endTime.value}&unit=${
          (allottedTime.value as number) / 12 + '年'
        }`,
      fileType: 'pdf',
    });
  }
</script>

<style lang="scss" scoped>
  .container {
    min-height: 100vh;
    background-color: #fff;
    padding: 30rpx;
    .options {
      font-size: 28rpx;
      height: 96rpx;
      .label {
        display: inline-block;
        width: 200rpx;
        text-align: right;
        font-weight: bolder;
        color: #333;
        margin-right: 16rpx;
        flex-shrink: 0;
      }
      .value {
        flex: 1;
        color: #666664;
      }
    }
  }
</style>
